<template>
	<div class="p-4">
		<BasicTable @register="register">
			<template #toolbar>
				<a-button type="primary" @click="expandAll">展开全部</a-button>
				<a-button type="primary" @click="collapseAll">折叠全部</a-button>
			</template>
		</BasicTable>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable } from '#/components';
import { useTable } from '#/hooks';
import { getTreeTable } from '@/api/demo';

const baseColumns = [
	{
		title: '作业代码',
		dataIndex: 'jobCode',
		width: 210,
	},
	{
		title: '作业名称',
		dataIndex: 'jobName',
		width: '25%',
	},
	{
		title: '计划开始日期',
		dataIndex: 'planStartDate',
	},
	{
		title: '计划完成日期',
		dataIndex: 'planFinishDate',
	},
	{
		title: '计划尚需工期',
		dataIndex: 'planDuration',
	},
	{
		title: '实际开始日期',
		dataIndex: 'realStartDate',
	},
	{
		title: '实际完成日期',
		dataIndex: 'realFinishDate',
	},
	{
		title: '计划进度百分比',
		dataIndex: 'planFinishPercent',
	},
	{
		title: '实际进度百分比',
		dataIndex: 'finishPercent',
	},
];

export default defineComponent({
	name: 'TreeTableDemo',
	components: { BasicTable },
	setup() {
		const [register, { expandAll, collapseAll }] = useTable({
			title: '树形表格',
			isTreeTable: true,
			rowSelection: {
				type: 'checkbox',
				getCheckboxProps(record: Recordable) {
					// Demo: 第一行（id为0）的选择框禁用
					if (record.id === '0') {
						return { disabled: true };
					} else {
						return { disabled: false };
					}
				},
			},
			titleHelpMessage: '树形组件不能和序列号列同时存在',
			columns: baseColumns,
			api: getTreeTable,
			rowKey: 'id',
			pagination: false,
		});
		return { register, expandAll, collapseAll };
	},
});
</script>
